// // 主页面入口
// import 'package:flutter/material.dart';

// class ComplexScrollScreen extends StatelessWidget {
//   const ComplexScrollScreen({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       body: _ComplexScrollView(
//         categories: CategoryRepository.getCategories(),
//         featuredCards: CardRepository.getFeaturedCards(),
//         gridItems: GridItemRepository.getGridItems(),
//       ),
//       bottomNavigationBar: const AppBottomNavigation(),
//     );
//   }
// }

// // 核心滚动视图组件
// class _ComplexScrollView extends StatelessWidget {
//   final List<Category> categories;
//   final List<FeaturedCard> featuredCards;
//   final List<GridItem> gridItems;

//   const _ComplexScrollView({
//     required this.categories,
//     required this.featuredCards,
//     required this.gridItems,
//   });

//   @override
//   Widget build(BuildContext context) {
//     return CustomScrollView(
//       physics: const BouncingScrollPhysics(),
//       slivers: [
//         _buildAppBar(),
//         _buildStickyHeader(),
//         _buildHorizontalCards(),
//         _buildWaterfallGrid(),
//       ],
//     );
//   }

//   // 动态折叠头图
//   SliverAppBar _buildAppBar() {
//     return SliverAppBar(
//       expandedHeight: 250,
//       pinned: true,
//       flexibleSpace: FlexibleSpaceBar(
//         background: CachedNetworkImage(
//           imageUrl: 'https://picsum.photos/1080/1920',
//           fit: BoxFit.cover,
//           placeholder: (_, __) => const LoadingShimmer(),
//           errorWidget: (_, __, ___) => const ImageErrorPlaceholder(),
//         ),
//         title: Text(
//           '创意空间',
//           style: context.textTheme.headlineSmall?.copyWith(
//             color: Colors.white,
//             fontWeight: FontWeight.bold,
//           ),
//         ),
//         collapseMode: CollapseMode.parallax,
//       ),
//     );
//   }

//   // 悬浮分类导航
//   SliverPersistentHeader _buildStickyHeader() {
//     return SliverPersistentHeader(
//       pinned: true,
//       delegate: StickyCategoryDelegate(
//         child: CategoryNavBar(categories: categories),
//       ),
//     );
//   }

//   // 横向卡片滑动区
//   SliverToBoxAdapter _buildHorizontalCards() {
//     return SliverToBoxAdapter(
//       child: SizedBox(
//         height: 180,
//         child: ListView.separated(
//           scrollDirection: Axis.horizontal,
//           padding: const EdgeInsets.symmetric(horizontal: Dimens.spacingMedium),
//           itemCount: featuredCards.length,
//           separatorBuilder: (_, __) => const SizedBox(width: Dimens.spacingMedium),
//           itemBuilder: (_, index) => FeaturedCardItem(featuredCards[index]),
//         ),
//       ),
//     );
//   }

//   // 瀑布流内容区
//   SliverPadding _buildWaterfallGrid() {
//     return SliverPadding(
//       padding: const EdgeInsets.all(Dimens.spacingMedium),
//       sliver: SliverGrid(
//         gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
//           maxCrossAxisExtent: 200,
//           mainAxisSpacing: Dimens.spacingMedium,
//           crossAxisSpacing: Dimens.spacingMedium,
//           childAspectRatio: 0.8,
//         ),
//         delegate: SliverChildBuilderDelegate(
//           (_, index) => GridItemCard(gridItems[index]),
//           childCount: gridItems.length,
//         ),
//       ),
//     );
//   }
// }

// // 数据模型
// class Category {
//   final String id;
//   final String name;
//   final Color color;

//   Category({required this.id, required this.name, required this.color});
// }

// class FeaturedCard {
//   final String id;
//   final String title;
//   final String description;
//   final Color startColor;
//   final Color endColor;

//   FeaturedCard({
//     required this.id,
//     required this.title,
//     required this.description,
//     required this.startColor,
//     required this.endColor,
//   });
// }

// class GridItem {
//   final String id;
//   final String title;
//   final String description;
//   final Color color;

//   GridItem({
//     required this.id,
//     required this.title,
//     required this.description,
//     required this.color,
//   });
// }

// // 组件库
// class CategoryNavBar extends StatelessWidget {
//   final List<Category> categories;

//   const CategoryNavBar({super.key, required this.categories});

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       decoration: BoxDecoration(
//         color: context.colorScheme.surface,
//         boxShadow: [
//           BoxShadow(
//             color: Colors.black12,
//             blurRadius: Dimens.elevationSmall,
//             offset: const Offset(0, 2),
//         ],
//       ),
//       child: SingleChildScrollView(
//         scrollDirection: Axis.horizontal,
//         padding: const EdgeInsets.symmetric(vertical: Dimens.spacingSmall),
//         child: Row(
//           children: categories
//               .map((category) => CategoryChip(category: category))
//               .toList(),
//         ),
//       ),
//     );
//   }
// }

// class CategoryChip extends StatelessWidget {
//   final Category category;

//   const CategoryChip({super.key, required this.category});

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       margin: const EdgeInsets.symmetric(horizontal: Dimens.spacingSmall),
//       child: ChoiceChip(
//         label: Text(category.name),
//         selected: false,
//         onSelected: (_) => _handleCategorySelect(context),
//         backgroundColor: category.color.withOpacity(0.1),
//         selectedColor: category.color,
//         labelStyle: TextStyle(
//           color: category.color,
//           fontWeight: FontWeight.w500,
//         ),
//       ),
//     );
//   }

//   void _handleCategorySelect(BuildContext context) {
//     // 处理分类选择逻辑
//   }
// }

// class FeaturedCardItem extends StatelessWidget {
//   final FeaturedCard card;

//   const FeaturedCardItem(this.card, {super.key});

//   @override
//   Widget build(BuildContext context) {
//     return GestureDetector(
//       onTap: () => _navigateToDetail(context),
//       child: Container(
//         width: 280,
//         decoration: BoxDecoration(
//           borderRadius: BorderRadius.circular(Dimens.cornerRadiusLarge),
//           gradient: LinearGradient(
//             colors: [card.startColor, card.endColor],
//             begin: Alignment.topLeft,
//             end: Alignment.bottomRight,
//           ),
//         ),
//         child: Stack(
//           children: [
//             Positioned.fill(
//               child: Icon(Icons.star, 
//                 size: 60, 
//                 color: Colors.white.withOpacity(0.1)),
//             Padding(
//               padding: const EdgeInsets.all(Dimens.spacingLarge),
//               child: Column(
//                 crossAxisAlignment: CrossAxisAlignment.start,
//                 children: [
//                   Text(card.title, 
//                     style: context.textTheme.titleLarge?.copyWith(
//                       color: Colors.white,
//                       fontWeight: FontWeight.bold,
//                     )),
//                   const Spacer(),
//                   Text(card.description,
//                     style: context.textTheme.bodyMedium?.copyWith(
//                       color: Colors.white70,
//                     )),
//                 ],
//               ),
//             )
//           ],
//         ),
//       ),
//     );
//   }

//   void _navigateToDetail(BuildContext context) {
//     // 导航到详情页
//   }
// }

// class GridItemCard extends StatelessWidget {
//   final GridItem item;

//   const GridItemCard(this.item, {super.key});

//   @override
//   Widget build(BuildContext context) {
//     return Card(
//       elevation: Dimens.elevationSmall,
//       shape: RoundedRectangleBorder(
//         borderRadius: BorderRadius.circular(Dimens.cornerRadiusMedium)),
//       child: Column(
//         crossAxisAlignment: CrossAxisAlignment.start,
//         children: [
//           Expanded(
//             child: Container(
//               decoration: BoxDecoration(
//                 color: item.color.withOpacity(0.8),
//                 borderRadius: const BorderRadius.vertical(
//                   top: Radius.circular(Dimens.cornerRadiusMedium)),
//               ),
//               alignment: Alignment.center,
//               child: Icon(Icons.image, 
//                 size: 40, 
//                 color: Colors.white),
//             ),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(Dimens.spacingMedium),
//             child: Column(
//               crossAxisAlignment: CrossAxisAlignment.start,
//               children: [
//                 Text(item.title, 
//                   style: context.textTheme.titleMedium?.copyWith(
//                     fontWeight: FontWeight.bold,
//                   )),
//                 const SizedBox(height: Dimens.spacingXSmall),
//                 Text(item.description,
//                   style: context.textTheme.bodySmall?.copyWith(
//                     color: context.colorScheme.onSurfaceVariant,
//                   )),
//               ],
//             ),
//           )
//         ],
//       ),
//     );
//   }
// }

// // 其他辅助组件和样式类
// class StickyCategoryDelegate extends SliverPersistentHeaderDelegate {
//   final Widget child;

//   StickyCategoryDelegate({required this.child});

//   @override
//   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
//     return Material(child: child);
//   }

//   @override
//   double get maxExtent => 60;

//   @override
//   double get minExtent => 60;

//   @override
//   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
// }

// class AppBottomNavigation extends StatelessWidget {
//   const AppBottomNavigation({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return BottomNavigationBar(
//       currentIndex: 0,
//       selectedItemColor: context.colorScheme.primary,
//       unselectedItemColor: context.colorScheme.onSurfaceVariant,
//       items: const [
//         BottomNavigationBarItem(
//           icon: Icon(Icons.home_outlined),
//           activeIcon: Icon(Icons.home),
//           label: '首页'),
//         BottomNavigationBarItem(
//           icon: Icon(Icons.explore_outlined),
//           activeIcon: Icon(Icons.explore),
//           label: '发现'),
//         BottomNavigationBarItem(
//           icon: Icon(Icons.person_outlined),
//           activeIcon: Icon(Icons.person),
//           label: '我的'),
//       ],
//     );
//   }
// }


  // 折叠头图（带视差效果）
  // SliverAppBar _buildParallaxHeader() {
  //   return SliverAppBar(
  //     expandedHeight: 250,
  //     pinned: true,
  //     flexibleSpace: FlexibleSpaceBar(
  //       collapseMode: CollapseMode.parallax,
  //       background: Stack(
  //         fit: StackFit.expand,
  //         children: [
  //           Image.network('https://picsum.photos/1080/1920', fit: BoxFit.cover),
  //           const DecoratedBox(
  //             decoration: BoxDecoration(
  //               gradient: LinearGradient(
  //                 colors: [Colors.transparent, Colors.black54],
  //                 begin: Alignment.topCenter,
  //                 end: Alignment.bottomCenter,
  //               ),
  //             ),
  //           ),
  //         ],
  //       ),
  //       title: const Text('潮流精选'),
  //     ),
  //   );
  // }

  // // 智能导航系统（带滚动态效）
  // MultiSliver _buildSmartNavigation() {
  //   return MultiSliver(
  //     children: [
  //       SliverPinnedHeader(
  //         child: Container(
  //           color: Colors.white,
  //           padding: const EdgeInsets.symmetric(vertical: 8),
  //           child: _buildCategoryTabs(),
  //         ),
  //       ),
  //       SliverList(
  //         delegate: SliverChildBuilderDelegate(
  //           (context, index) {
  //             return _buildDynamicFilter();
  //           },
  //           childCount: 20,
  //         ),
  //       ),
  //     ],
  //   );
  // }

  // // 分类标签（支持横向滚动）
  // Widget _buildCategoryTabs() {
  //   return SingleChildScrollView(
  //     scrollDirection: Axis.horizontal,
  //     child: Row(
  //       children: List.generate(8, (i) => _CategoryChip('标签 ${i + 1}')),
  //     ),
  //   );
  // }

  // // 动态筛选条（带滚动缩放）
  // Widget _buildDynamicFilter() {
  //   return AnimatedContainer(
  //     duration: const Duration(milliseconds: 300),
  //     height: 40,
  //     margin: const EdgeInsets.symmetric(horizontal: 12),
  //     decoration: BoxDecoration(
  //       color: Colors.grey[100],
  //       borderRadius: BorderRadius.circular(20),
  //     ),
  //     child: Row(
  //       children: [
  //         IconButton(icon: const Icon(Icons.tune), onPressed: () {}),
  //         Expanded(child: _buildScrollDrivenFilter()),
  //       ],
  //     ),
  //   );
  // }

  // // 横向促销卡片区
  // SliverToBoxAdapter _buildHorizontalPromo() {
  //   return SliverToBoxAdapter(
  //     child: SizedBox(
  //       height: 160,
  //       child: ListView.builder(
  //         scrollDirection: Axis.horizontal,
  //         itemCount: 5,
  //         itemBuilder: (_, i) => _PromoCard(i),
  //       ),
  //     ),
  //   );
  // }

  // 智能瀑布流（自动计算高度）
  // SliverStaggeredGrid _buildWaterfallGrid() {
  //   return SliverStaggeredGrid.extentBuilder(
  //     maxCrossAxisExtent: 200,
  //     staggeredTileBuilder: (index) => StaggeredTile.extent(
  //       1,
  //       index.isEven ? 220 : 260, // 动态高度模拟
  //     ),
  //     mainAxisSpacing: 8,
  //     crossAxisSpacing: 8,
  //     itemCount: 20,
  //     itemBuilder: (context, index) => _ProductItem(index),
  //   );
  // }
// }

// // 分类标签组件
// class _CategoryChip extends StatelessWidget {
//   final String label;

//   const _CategoryChip(this.label);

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       margin: const EdgeInsets.symmetric(horizontal: 8),
//       padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
//       decoration: BoxDecoration(
//         color: Colors.blueAccent.withOpacity(0.1),
//         borderRadius: BorderRadius.circular(20),
//       ),
//       child: Text(label, style: const TextStyle(color: Colors.blueAccent)),
//     );
//   }
// }

// // 促销卡片组件
// class _PromoCard extends StatelessWidget {
//   final int index;

//   const _PromoCard(this.index);

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       width: 280,
//       margin: const EdgeInsets.symmetric(horizontal: 8),
//       decoration: BoxDecoration(
//         borderRadius: BorderRadius.circular(15),
//         gradient: LinearGradient(
//           colors: [
//             Colors.primaries[index % 18],
//             Colors.primaries[(index + 5) % 18]
//           ],
//         ),
//       ),
//       child: Stack(
//         children: [
//           Positioned.fill(
//             child: Icon(Icons.local_offer,
//                 size: 60, color: Colors.white.withOpacity(0.1)),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(16),
//             child: Column(
//               crossAxisAlignment: CrossAxisAlignment.start,
//               children: [
//                 Text('限时特惠 $index',
//                     style: const TextStyle(color: Colors.white, fontSize: 16)),
//                 const Spacer(),
//                 const Text('点击查看详情 →', style: TextStyle(color: Colors.white70)),
//               ],
//             ),
//           )
//         ],
//       ),
//     );
//   }
// }

// // 商品瀑布流项
// class _ProductItem extends StatelessWidget {
//   final int index;

//   const _ProductItem(this.index);

//   @override
//   Widget build(BuildContext context) {
//     return Card(
//       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
//       child: Column(
//         crossAxisAlignment: CrossAxisAlignment.start,
//         children: [
//           Expanded(
//             child: Container(
//               decoration: BoxDecoration(
//                 borderRadius:
//                     const BorderRadius.vertical(top: Radius.circular(12)),
//                 color: Colors.primaries[index % 18].withOpacity(0.8),
//               ),
//               alignment: Alignment.center,
//               child:
//                   const Icon(Icons.shopping_bag, size: 40, color: Colors.white),
//             ),
//           ),
//           Padding(
//             padding: const EdgeInsets.all(8),
//             child: Column(
//               crossAxisAlignment: CrossAxisAlignment.start,
//               children: [
//                 Text('商品 $index',
//                     style: const TextStyle(fontWeight: FontWeight.bold)),
//                 const SizedBox(height: 4),
//                 Text('¥ ${99 + index % 10 * 50}',
//                     style: TextStyle(color: Colors.red[600])),
//               ],
//             ),
//           )
//         ],
//       ),
//     );
//   }
// }

// // 动态筛选条（滚动驱动）
// class _buildScrollDrivenFilter extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return ListView(
//       scrollDirection: Axis.horizontal,
//       children: const [
//         _FilterTag('销量排序'),
//         _FilterTag('价格区间'),
//         _FilterTag('品牌筛选'),
//         _FilterTag('智能推荐'),
//       ],
//     );
//   }
// }

// // 筛选标签组件
// class _FilterTag extends StatelessWidget {
//   final String label;

//   const _FilterTag(this.label);

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       margin: const EdgeInsets.symmetric(horizontal: 4),
//       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
//       decoration: BoxDecoration(
//         color: Colors.white,
//         borderRadius: BorderRadius.circular(16),
//         border: Border.all(color: Colors.grey[300]!),
//       ),
//       child: Text(label),
//     );
//   }
// }

// // Helper method to create action buttons
// Widget _buildActionButton(String title, IconData icon) {
//   return Row(
//     mainAxisSize: MainAxisSize.min,
//     children: [
//       Icon(icon, size: 30),
//       const SizedBox(width: 2),
//       Text(title),
//     ],
//   );
// }